<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>阅读学习</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="keywords" content="fly,layui,前端社区">
  <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
  <link rel="stylesheet" th:href="@{/res/layui/css/layui.css}">
  <link rel="stylesheet" th:href="@{/res/css/global.css}">
</head>
<body>

<div th:replace="/common/header::header-div"></div>

<div class="layui-container">
  <div id="readId" style="display: none" th:text="${read.id}"></div>
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md6 content detail">
      <div class="fly-panel detail-box">
        <h1 th:text="${read.title}"></h1>
        <div class="detail-body photos" th:utext="${read.english}">
        </div>
      </div>
    </div>
    <div class="layui-col-md6 content detail">
      <div class="fly-panel detail-box">
        <h1 th:text="${read.titleChinese}"></h1>
        <div class="detail-body photos" th:utext="${read.chinese}">
        </div>
        <button type="button" onclick="nextRead()" class="layui-btn">下一篇</button>
      </div>
    </div>

  </div>
</div>

<script th:src="@{/res/layui/layui.js}"></script>
<script>
  layui.use(['jquery', 'layer'], function () {
    const $ = layui.jquery;
    const layer = layui.layer;

    window.nextRead = function () {
      let readId = $("#readId").html();
      $.ajax({
        url:'/learn/read/next/',
        data: {"readId" : readId},
        dataType:"json",
        type:'post',
        success:function(data){
          if(data.success){
            window.location.href = "/learn/read/one/" + data.data;
          }else{
            layer.msg("短文不存在");
            return;
          }
        }
      });
    }
  })
</script>

</body>
</html>